<template>
<div>
  <inline-calendar
    ref="calendar"
    @on-change="onChange"
    @on-view-change="onViewChange"
    class="inline-calendar-demo"
    :show.sync="show"
    v-model="value"
    start-date="2016-04-01"
    end-date="2018-05-30"
    :range="false"
    :show-last-month="false"
    :show-next-month="false"
    :highlight-weekend="true"
    :return-six-rows="true"
    :replace-text-list="replaceTextList"
    :weeks-list="weeksList"
    :render-function="buildSlotFn">
  </inline-calendar>

  <button-tab v-model="dateRangeMode" v-show="showDateRangeTab">
    <button-tab-item>{{ $t('today') }}</button-tab-item>
    <button-tab-item selected>{{ $t('week') }}</button-tab-item>
    <button-tab-item>{{ $t('month') }}</button-tab-item>
  </button-tab>

  <panel :header="visibleDateRangeTitle" :footer="footer" :list="visibleList" type="1" ></panel>
</div>
</template>

<i18n>
today:
  en: Day
  zh-CN: 日
week:
  en: Week
  zh-CN: 周
month:
  en: Month
  zh-CN: 月
course_list:
  en: Course List
  zh-CN: 课程列表
</i18n>

<script>
import { InlineCalendar, Panel, Group, XSwitch, Radio, XButton, Cell, ButtonTab, ButtonTabItem, Divider } from 'vux'

// date range mode
const DAY_MODE = 0
const WEEK_MODE = 1
const MONTH_MODE = 2

export default {
  data () {
    return {
      show: true,
      value: '',
      monthDate: '',
      replaceTextList: { 'TODAY': '今' },
      replace: false,
      changeWeeksList: false,
      weeksList: [],
      buildSlotFn: () => '',
      highlightDays: [],
      courseDateMode: 0,
      dateRangeMode: MONTH_MODE,
      courseDetailList: [],
      visibleDateRange: [],
      visibleList: [{
        title: '高一数学小班',
        desc: '12:00 陈晓明, 高雄, 王涛 ...',
        url: '/component/cell'
      }],
      footer: {
        title: this.$t('more'),
        url: 'http://vux.li'
      }
    }
  },
  methods: {
    onChange (val) {
      if (this.$moment(val).isValid()) {
        // this.loadCourseDetails(this.$moment(val))
        this.dateRangeMode = DAY_MODE
        this.updateAfterDateOrRangeValueChange(this.dateRangeMode, this.$moment(this.value))
      } else {
        this.dateRangeMode = MONTH_MODE
      }
    },
    onViewChange (val, count) {
      console.log('Current month is: ' + val.firstCurrentMonthDate)
      this.monthDate = this.$moment(val.firstCurrentMonthDate)
      this.dateRangeMode = MONTH_MODE
      this.loadCourseDetails(this.$moment(val.firstCurrentMonthDate))
    },
    loadCourseDetails (dateInMonth) {
      let beginDate = dateInMonth.startOf('month').format('YYYY-MM-DD')
      let endDate = dateInMonth.endOf('month').format('YYYY-MM-DD')
      let self = this

      self.courseDetailList = []
      self.highlightDays = []
      this.$http.get('/course_details?begin_date=' + beginDate + '&end_date=' + endDate).then(function (response) {
        self.courseDetailList = response.data.list

        self.courseDetailList.forEach(courseDetail => {
          self.highlightDays.push(self.$moment(courseDetail.course_date).date())
        })
      })
    },
    filterCourseDetailsByDateRange (date, rangeMode) {
      var dateRange = this.getDateRangeByMode(date, rangeMode)

      let self = this
      this.visibleList = []
      self.courseDetailList.forEach(courseDetail => {
        var courseDate = self.$moment(courseDetail.course_date)
        if (courseDate >= dateRange[0] && courseDate <= dateRange[1]) {
          self.visibleList.push(self.getVisibleObject(courseDetail))
        }
      })
    },
    getDateRangeByMode (date, rangeMode) {
      var beginDate = null
      var endDate = null

      if (rangeMode === DAY_MODE) {
        beginDate = date.clone()
        endDate = date.clone()
      } else if (rangeMode === WEEK_MODE) {
        beginDate = date.clone().startOf('week')
        endDate = date.clone().endOf('week')
      } else if (rangeMode === MONTH_MODE) {
        beginDate = date.clone().startOf('month')
        endDate = date.clone().endOf('month')
      }

      return [beginDate, endDate]
    },
    getVisibleObject (courseDetail) {
      let self = this
      return { title: courseDetail.course.name,
        desc: self.$moment(courseDetail.course_date).format('D日') + ' 课堂: ' + courseDetail.course.lesson_count + ' ' + self.$moment(courseDetail.starttime, 'HH:mm:ss').format('HH:mm') + ' 教室: ' + courseDetail.room.name + courseDetail.course.school_name + '<br/>(' + courseDetail.student_names.length + ' 人) ' + courseDetail.student_names.join(','),
        url: '/component/cell'
      }
    },
    updateAfterDateOrRangeValueChange (dateRangeModeVal, dateVal) {
      if (dateRangeModeVal === DAY_MODE || dateRangeModeVal === WEEK_MODE) {
        if (dateVal !== '') {
          this.visibleDateRange = this.getDateRangeByMode(dateVal, dateRangeModeVal)
          this.filterCourseDetailsByDateRange(dateVal, dateRangeModeVal)
        }
      } else {
        if (this.monthDate !== '') {
          this.visibleDateRange = this.getDateRangeByMode(this.$moment(this.monthDate), dateRangeModeVal)
          this.filterCourseDetailsByDateRange(this.$moment(this.monthDate), dateRangeModeVal)
        }
      }
    }
  },
  created () {
    this.value = this.$moment().format('YYYY-MM-DD')
  },
  computed: {
    showDateRangeTab () {
      var self = this
      if (this.value !== '') {
        var selectedDate = self.$moment(this.value)
        var beginMonthDate = self.$moment(this.monthDate).clone().startOf('month')
        var endMonthDate = self.$moment(this.monthDate).clone().endOf('month')
        return selectedDate >= beginMonthDate && selectedDate <= endMonthDate
      }
      return false
    },
    visibleDateRangeTitle () {
      var title = ''
      if (this.visibleDateRange[0] !== undefined) {
        if (this.dateRangeMode === DAY_MODE) {
          title = this.visibleDateRange[0].format('MM/DD') + ' 日'
        } else if (this.dateRangeMode === WEEK_MODE) {
          title = this.visibleDateRange[0].format('MM/DD') + ' ~ ' + this.visibleDateRange[1].format('MM/DD') + ' 周'
        } else if (this.dateRangeMode === MONTH_MODE) {
          title = this.visibleDateRange[0].format('M') + ' 月'
        }
      }
      return title + '课程'
    }
  },
  watch: {
    value (val) {
      let self = this
      this.buildSlotFn = (line, index, data) => {
        return self.highlightDays.indexOf(data.date) > -1 ? '<div style="font-size:12px;text-align:center;"><span style="display:inline-block;width:5px;height:5px;background-color:red;border-radius:50%;"></span></div>' : '<div style="height:19px;"></div>'
      }
    },
    courseDetailList (val) {
      this.filterCourseDetailsByDateRange(this.monthDate, this.dateRangeMode)
    },
    dateRangeMode (val) {
      this.updateAfterDateOrRangeValueChange(val, this.$moment(this.value))
    }
  },
  components: {
    InlineCalendar,
    Panel,
    Group,
    XSwitch,
    Radio,
    XButton,
    Cell,
    ButtonTab,
    ButtonTabItem,
    Divider
  }
}
</script>

<style lang="less" scoped>
.inline-calendar-demo {
  background: rgba(255,255,255,0.9);
}
</style>
